<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点名称显示测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #000;
            color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .test-panel {
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #333;
            max-width: 800px;
            margin-bottom: 20px;
        }
        
        .test-title {
            color: #4CAF50;
            font-weight: bold;
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        .test-result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
        }
        
        .success {
            background: rgba(76, 175, 80, 0.1);
            border: 1px solid #4CAF50;
            color: #4CAF50;
        }
        
        .error {
            background: rgba(244, 67, 54, 0.1);
            border: 1px solid #F44336;
            color: #F44336;
        }
        
        .info {
            background: rgba(33, 150, 243, 0.1);
            border: 1px solid #2196F3;
            color: #2196F3;
        }
        
        .btn {
            background: #2196F3;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
            margin-top: 10px;
        }
        
        .btn:hover {
            background: #1976D2;
        }
        
        #canvas {
            width: 100%;
            height: 400px;
            border: 1px solid #333;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="test-panel">
        <div class="test-title">🔍 节点名称显示测试</div>
        <div id="test-results">
            <div class="test-result info">正在初始化测试...</div>
        </div>
        <button class="btn" onclick="runTest()">重新测试</button>
        <button class="btn" onclick="showNodeList()">显示节点列表</button>
    </div>
    
    <div class="test-panel">
        <div class="test-title">📊 图形预览</div>
        <canvas id="canvas"></canvas>
    </div>

    <script type="module">
        import { Graph } from './core/Graph.js'
        import { loadGraphDataFromJSON } from './data/dataLoader.js'
        
        let graph = null
        let graphData = null
        
        async function initTest() {
            try {
                const resultsDiv = document.getElementById('test-results')
                resultsDiv.innerHTML = '<div class="test-result info">正在加载数据...</div>'
                
                // 加载数据
                graphData = await loadGraphDataFromJSON('./data/exported_graph_data.json')
                
                // 创建图对象
                graph = new Graph()
                graph.setData(graphData)
                
                // 测试节点名称
                testNodeNames()
                
            } catch (error) {
                console.error('测试初始化失败:', error)
                document.getElementById('test-results').innerHTML = 
                    `<div class="test-result error">❌ 测试失败: ${error.message}</div>`
            }
        }
        
        function testNodeNames() {
            const resultsDiv = document.getElementById('test-results')
            const results = []
            
            // 检查原始数据
            results.push(`<div class="test-result info">📋 原始数据统计:</div>`)
            results.push(`<div class="test-result info">  - 节点数量: ${graphData.nodes?.length || 0}</div>`)
            results.push(`<div class="test-result info">  - 边数量: ${graphData.edges?.length || 0}</div>`)
            
            // 检查图对象
            results.push(`<div class="test-result info">📊 图对象统计:</div>`)
            results.push(`<div class="test-result info">  - 节点数量: ${graph.nodesCount}</div>`)
            results.push(`<div class="test-result info">  - 边数量: ${graph.edgesCount}</div>`)
            
            // 检查前5个节点的名称
            results.push(`<div class="test-result info">🔍 前5个节点名称检查:</div>`)
            
            const nodeKeys = Object.keys(graph.nodes).slice(0, 5)
            let nameTestPassed = 0
            
            nodeKeys.forEach((key, index) => {
                const node = graph.nodes[key]
                const nodeData = node.data[0] // 获取节点数据
                
                if (key === nodeData?.name || key === nodeData?.id) {
                    results.push(`<div class="test-result success">  ✅ 节点${index + 1}: "${key}" (类型: ${nodeData?.type || 'unknown'})</div>`)
                    nameTestPassed++
                } else {
                    results.push(`<div class="test-result error">  ❌ 节点${index + 1}: 键="${key}", 名称="${nodeData?.name}", ID="${nodeData?.id}"</div>`)
                }
            })
            
            // 总结
            if (nameTestPassed === nodeKeys.length) {
                results.push(`<div class="test-result success">🎉 节点名称显示测试通过！所有节点都正确显示名称。</div>`)
            } else {
                results.push(`<div class="test-result error">⚠️ 发现问题：${nodeKeys.length - nameTestPassed}/${nodeKeys.length} 个节点名称显示异常</div>`)
            }
            
            resultsDiv.innerHTML = results.join('')
        }
        
        // 全局函数
        window.runTest = function() {
            if (graph && graphData) {
                testNodeNames()
            } else {
                initTest()
            }
        }
        
        window.showNodeList = function() {
            if (!graph) return
            
            const nodeList = Object.keys(graph.nodes).slice(0, 20).map(key => {
                const node = graph.nodes[key]
                const nodeData = node.data[0]
                return `${key} (ID: ${nodeData?.id}, 类型: ${nodeData?.type})`
            }).join('<br>')
            
            const resultsDiv = document.getElementById('test-results')
            resultsDiv.innerHTML = `
                <div class="test-result info">📝 前20个节点列表:</div>
                <div class="test-result info" style="font-size: 12px; line-height: 1.6;">
                    ${nodeList}
                </div>
            `
        }
        
        // 启动测试
        initTest()
    </script>
</body>
</html>



